<template>
  <div class="cart">
    <Header title="购物车" :edit="true"/>
    <CartDatails v-if="isShow" :changeShow="changeShow"/>
    <Empty v-else/>
    <Footer/>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import Empty from '@/components/Empty.vue'
import Header from '@/components/Header.vue'
import CartDatails from './components/CartDatails.vue'
import {useStore} from 'vuex'
import { ref } from 'vue'
export default {
  components:{Footer,Empty,Header,CartDatails},
  setup() {
    const store = useStore()
    const isShow = ref(false)
    const initData = ()=>{
      if(store.state.cartSum.length > 0){
        isShow.value = true
      }
    }
    initData()
    const changeShow = ()=>{
      isShow.value = false
    }
    return {
      store,
      isShow,
      changeShow
    }
  }
}
</script>

<style lang="less" scoped>
.cart{
  display: flex;
  flex-flow: column;
  height: 100%;
  .content{
    flex: 1;
    overflow-y: auto;
  }
}
</style>
